<template>
  <div class="show">
    <div class="Carousel" v-for="(item, i) in list" :key="i" v-show="i == id">
      <img :src="item" alt="" />
      <div class="around">
        <span @click="left" class="left">&lt;</span>
        <span @click="right" class="right">&gt;</span>
      </div>
      <ul>
        <li
          class="btn"
          v-for="(item, index) in data"
          :key="index"
          @click="nav(index)"
          :class="{ active: index == id }"
        >
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "show",
  data() {
    return {
      id: 0,
      list: ["images/b1.png", "images/b2.png", "images/b3.png"],
      data: ["1", "2", "3"],
    };
  },
  computed: {},
  methods: {
    play() {
      this.time = setInterval(() => {
        this.id++;
        if (this.id == 3) {
          this.id = 0;
        }
      }, 2000);
    },
    nav(index) {
      this.id = index;
    },
    left() {
      this.id--;
      if (this.id < 0) {
        this.id = 2;
      }
    },
    right() {
      this.id++;
      if (this.id == 3) {
        this.id = 0;
      }
    },
  },
  mounted() {},
  created() {
    this.play();
  },
};
</script>
<style scoped lang="scss">
.show {
  width: 100%;
  height: 100vh;
  background-color: #ccc;
  position: relative;
  .Carousel {
    width: 630px;
    height: 370px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100%;
      height: 100%;
    }
    .around {
      color: red;
      font-size: 30px;

      .left {
        position: absolute;
        top: 50%;
        left: 20px;
        background-color: #000000;
        width: 50px;
        height: 50px;
      }
      .right {
        position: absolute;
        top: 50%;
        right: 20px;
        background-color: #000000;
        width: 50px;
        height: 50px;
      }
    }
    .active {
      color: red;
    }

    ul {
      position: absolute;
      bottom: 20px;
      left: 30%;
      display: flex;
      width: 300px;

      .btn {
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #fff;
      }
    }
  }
}
</style>
